<template>
  <div class="example">
    <div
      @click="expandClick"
      class=" h-8 w-8 rounded-lg cursor-pointer bg-white border-2 border-solid border-cyan-50 mb-1 ml-1"
    >
      <img src="./expand.png" alt="" />
    </div>
    <div v-show="expandStatus">
      <div class="player">
        <div class="pl" @click="showPlaylist = !showPlaylist"></div>
        <div class="title">{{ currentPlayData.title }}</div>
        <div class="artist">{{ currentPlayData.artist }}</div>
        <div class="cover">
          <img :src="currentPlayData.coverSrc" alt="" />
        </div>
        <div class="controls">
          <div @click="playMusic" v-show="!playStatus" class="play"></div>
          <div @click="playMusic" v-show="playStatus" class="pause"></div>
          <div @click="playPre" class="rew"></div>
          <div @click="playNext" class="fwd"></div>
        </div>
        <div class="volume">
          <slider @change="volumeChange" v-model="volume" color="red" track-color="rgba(0,0,0,0)" :height="8"></slider>
        </div>
        <div class="tracker">
          <slider @drag-start="dragStart" @drag-end="seekAudio"  v-model="trackValue" color="red" track-color="rgba(0,0,0,0)" :height="13"></slider>
        </div>
      </div>
      <audio
        ref="videoDom"
        :src="currentPlayData.audioSrc"
        @ended="audioEnd"
        @timeupdate="timeupdate"
      ></audio>
      <ul class="playlist" :class="{ hidden: showPlaylist == false }">
        <li
          v-for="(item, index) in playlistdata"
          :key="item.id"
          @click="playlistClickHandler(item, index)"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import slider from "vue3-slider"
const { ref, reactive } = require("@vue/reactivity");
const { nextTick } = require("@vue/runtime-core");
const showPlaylist = ref(false);
const playlistdata = reactive([
  {
    id: 1,
    title: "Best Friend",
    artist: "西野カナ",
    audioSrc: "http://qingqaq.fun/kanaSong/Best Friend.mp3",
    coverSrc: "http://qingqaq.fun/kanaimg/bestfriend.png",
  },
  {
    id: 2,
    title: "Darling",
    artist: "西野カナ",
    audioSrc: "http://qingqaq.fun/kanaSong/Darling.mp3",
    coverSrc: "http://qingqaq.fun/kanaimg/tolove.jpg",
  },
  {
    id: 3,
    title: "トリセツ",
    artist: "西野カナ",
    audioSrc: "http://qingqaq.fun/kanaSong/トリセツ.mp3",
    coverSrc: "http://qingqaq.fun/kanaimg/truelove.jpg",
  },
]);
let currentPlayData = ref({
  id: 1,
  title: "Best Friend",
  artist: "西野カナ",
  audioSrc: "http://qingqaq.fun/kanaSong/Best Friend.mp3",
  coverSrc: "http://qingqaq.fun/kanaimg/bestfriend.png",
});
const playStatus = ref(false);
const expandStatus = ref(true);
const volume = ref(100);
const videoDom = ref();
const trackValue = ref(0)
let trackStatus = "nodrag"
let currentPlayIndex = 0;
const playMusic = function () {
  playStatus.value ? videoDom.value.pause() : videoDom.value.play();
  playStatus.value = !playStatus.value;
};
const audioRebuild = function () {
  nextTick(() => {
    videoDom.value.load();
    videoDom.value.play();
    playStatus.value = true;
  });
};
const playNext = function () {
  if (currentPlayIndex == playlistdata.length - 1) {
    return;
  }
  currentPlayIndex += 1;
  currentPlayData.value = playlistdata[currentPlayIndex];
  audioRebuild();
};
const playPre = function () {
  if (currentPlayIndex == 0) {
    return;
  }
  currentPlayIndex -= 1;
  currentPlayData.value = playlistdata[currentPlayIndex];
  audioRebuild();
};
const playlistClickHandler = function (item, index) {
  if (currentPlayIndex == index) {
    return;
  }
  currentPlayIndex = index;
  currentPlayData.value = item;
  audioRebuild();
};
const audioEnd = function () {
  playNext();
};
const expandClick = function () {
  expandStatus.value = !expandStatus.value;
};
const volumeChange = function(e){
  videoDom.value.volume = e / 100;
}
const dragStart = function(){
  trackStatus = 'drag'
}
const timeupdate = function(e){
  if(trackStatus == 'nodrag'){
    trackValue.value = Number((videoDom.value.currentTime / videoDom.value.duration) * 100); 
  }
}
const seekAudio = function(e){
  videoDom.value.currentTime = Number(e / 100) * videoDom.value.duration;
  trackStatus = 'nodrag'
}
</script>

<style scoped>
/* HTML5 Audio player with playlist styles */
.example {
  position: fixed;
  bottom: 10px;
}
.player {
  background: transparent url("./spr.png") no-repeat scroll center top;
  height: 162px;
  position: relative;
  width: 326px;
  z-index: 2;
}
.title,
.artist {
  font-family: verdana;
  left: 167px;
  position: absolute;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.title {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  top: 23px;
}
.artist {
  color: #eeeeee;
  font-size: 12px;
  top: 40px;
}
.pl {
  background: transparent url("./spr.png") no-repeat scroll -274px -175px;
  cursor: pointer;
  height: 34px;
  left: 270px;
  position: absolute;
  top: 20px;
  width: 32px;
}
.pl:hover {
  top: 21px;
}
.cover {
  background: transparent;
  background-size: 100% 100%;
  border-radius: 5px 5px 5px 5px;
  height: 94px;
  left: 20px;
  position: absolute;
  top: 20px;
  width: 94px;
}
.controls {
  cursor: pointer;
  height: 23px;
  left: 167px;
  position: absolute;
  top: 65px;
  width: 138px;
}
.controls .play,
.controls .pause,
.controls .rew,
.controls .fwd {
  background: transparent url("./spr.png") no-repeat scroll 0 0;
  float: left;
  height: 100%;
  width: 33%;
}
.controls .play {
  background-position: -8px -171px;
}
.controls .pause {
  background-position: -8px -198px;
}
.controls .rew {
  background-position: -54px -171px;
}
.controls .fwd {
  background-position: -100px -171px;
}
.controls .play:hover {
  background-position: -8px -170px;
}
.controls .pause:hover {
  background-position: -8px -197px;
}
.controls .rew:hover {
  background-position: -54px -170px;
}
.controls .fwd:hover {
  background-position: -100px -170px;
}
.hidden {
  display: none;
}
.controls .visible {
  display: block;
}
.volume {
  height: 11px;
  left: 190px;
  position: absolute;
  top: 96px;
  width: 112px;
}
.tracker {
  height: 15px;
  left: 20px;
  position: absolute;
  top: 124px;
  width: 285px;
}
.ui-slider-range {
  background: transparent url("./spr.png") no-repeat scroll 5px -222px;
  height: 100%;
  position: absolute;
  top: 0;
}
.ui-slider-handle {
  cursor: pointer;
  height: 10px;
  margin-left: -5px;
  position: absolute;
  top: 2px;
  width: 10px;
  z-index: 2;
}
.volume .ui-slider-handle {
  background: url("./spr.png") no-repeat scroll -201px -188px rgba(0, 0, 0, 0);
  height: 13px;
  width: 13px;
}
.playlist {
  background-color: #333333;
  border-radius: 5px 5px 5px 5px;
  list-style-type: none;
  margin: -10px 0 0 2px;
  padding-bottom: 10px;
  padding-top: 15px;
  position: relative;
  width: 322px;
  z-index: 1;
}
.playlist li {
  font-family: Arial;
  font-size: 14px;
  line-height: 1.5;
  color: #eeeeee;
  cursor: pointer;
  margin: 0 0 5px 15px;
}
.playlist li.active {
  font-weight: bold;
}
</style>